<script lang="ts">
import { toRaw } from 'vue';
import { footPrintStore, footPrintsStore } from '../stores/userInfo'
import router from '@/router';
import { ref } from 'vue';
export default {
    setup() {
        let footp: any = toRaw(footPrintStore().$state.footPrint);
        let foot: any = toRaw(footPrintsStore().$state.footPrints);

        let goPage: any = (path: any, pid: any) => {
            router.push({ path, query: { pid } })
        }
        let active = ref(0);

        footp.reverse();
        foot.reverse();
        console.log(footp);
        console.log(foot);
        

        return {
            footp,
            foot,
            goPage,
            active,
        };
    },
}
</script>

<template>
    <div class="footprint">
        <div class="footprint-Header">
            <van-nav-bar title="足迹" left-arrow @click-left="$router.back()" />
        </div>
        <div class="footprint-Body">
            <div class="footprint-record">
                <div class="record-item">
                    <h1> - 今天 - </h1>
                </div>

                <div class="diary_con">
                    <span :class="active == 0 ? 'active' : ''" @click="active = 0">动态</span>
                    <span :class="active == 1 ? 'active' : ''" @click="active = 1">文章</span>
                </div>
                <div class="footprint_list" v-if="active==0">
                    <div class="footprint_null" v-if="footp.length==0">
                        <img src="../assets/images/billdatail/bg_talk_empty.png">
                        <p>暂时还没有浏览记录</p>
                    </div>
                    <div class="footprint-item" v-else v-show="active == 0" v-for="item in footp" :key="item.id"
                        @click="goPage('/detail', item.id)">
                        <div class="item-com">
                            <h3 class="item-title txt-cut">{{ item.caseDetail.designNote }}</h3>
                            <span>{{ item.caseDetail.designerName }}</span>
                        </div>
                        <div class="item-imgBox">
                            <img :src="item.picUrl">
                        </div>
                    </div>
                </div>

                <div class="footprint_list" v-if="active==1">
                    <div class="footprint_null" v-if="foot.length==0">
                        <img src="../assets/images/billdatail/bg_talk_empty.png">
                        <p>暂时还没有浏览记录</p>
                    </div>
                    <div class="footprint-item" v-else v-show="active == 1" v-for="item in foot" :key="item.id"
                        @click="goPage('/detailesr', item.id)">
                        <div class="item-com">
                            <h3 class="item-title txt-cut">{{ item.title }}</h3>
                            <span>{{ item.user_info.name }}</span>
                        </div>
                        <div class="item-imgBox">
                            <img :src="item.cover_image_infos[0].url">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.footprint {
    .footprint-Header {
        position: sticky;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 1;
        .van-nav-bar::v-deep {
            .van-nav-bar__content {
                height: 35px;

                .van-nav-bar__left {
                    i {
                        font-size: 18px;
                        color: #000;
                    }
                }

                .van-nav-bar__title {
                    font-weight: normal;
                }
            }

        }
    }

    .footprint-Body {
        min-height: 94vh;
        padding: 10px 12px 0;

        .footprint-record {
            .record-item {
                margin-bottom: 6px;
                width: 100%;
                text-align: center;

                h1 {
                    font-size: 12px;
                    color: #999999;
                }
            }

            .diary_con {
                padding: 0px 12px;
                position: sticky;
                top: 35px;
                left: 0;
                display: flex;
                width: 100%;
                text-align: start;
                z-index: 10;
                box-sizing: border-box;
                background-color: #fff;

                span {
                    margin-right: 12px;
                    padding-bottom: 6px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    border-bottom: 3px solid transparent;
                    color: #999;

                    &.active {
                        color: #000;
                        border-bottom-color: #000;
                    }
                }
            }

            .footprint_list {


                .footprint_null {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 625px;

                    img {
                        width: 200px;
                        height: 200px;
                        display: block;
                    }

                    p {
                        font-size: 14px;
                        color: #999;
                    }
                }

                .footprint-item {
                    display: flex;
                    height: 106px;
                    align-items: center;
                    border-bottom: 1px solid #f5f5f5;
                    box-sizing: border-box;


                    .item-com {
                        display: flex;
                        flex-direction: column;
                        height: 100%;
                        justify-content: space-around;
                        margin-right: 20px;
                        flex: 1;

                        h3 {
                            font-size: 16px;
                            word-wrap: break-word;
                            word-break: break-all;
                        }

                        span {
                            font-size: 12px;
                            color: #999;
                            transform: scale(0.9);
                            transform-origin: left;
                        }
                    }

                    .item-imgBox {
                        width: 76px;
                        height: 76px;
                        flex-shrink: 0;
                        overflow: hidden;
                        border-radius: 4px;

                        img {
                            object-fit: cover;
                        }
                    }
                }
            }
        }
    }
}
</style>